<template>
  <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :title="isAdd ? '新增菜单' : '编辑菜单'" append-to-body width="600px">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="菜单类型" prop="busMainData.menuType">
        <el-radio v-for="item in dicts.menu_type" :key="item.id" v-model="form.busMainData.menuType" :label="item.dictCode">{{ item.dictName }}</el-radio>
      </el-form-item>
      <el-form-item v-if="form.busMainData.menuType !== '3'" prop="busMainData.menuType" label="菜单图标">
        <el-popover
          placement="bottom-start"
          width="460"
          trigger="click"
          @show="$refs['iconSelect'].reset()">
          <IconSelect ref="iconSelect" @selected="iconSelected" />
          <el-input slot="reference" v-model="form.busMainData.icon" style="width: 460px;" placeholder="点击选择图标" readonly>
            <svg-icon v-if="form.busMainData.icon" slot="prefix" :icon-class="form.busMainData.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
            <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
          </el-input>
        </el-popover>
      </el-form-item>
      <el-form-item label="菜单名称" prop="busMainData.menuName">
        <el-input v-model="form.busMainData.menuName" placeholder="名称">
          <el-button slot="append" icon="el-icon-plus" title="点击添加多语言" @click="addMultiLan" />
        </el-input>
        <multi-menu-lan ref="multiMenuLan" :sup_this="this" :menu_lan_list="form.menuLanVOList" :name="form.busMainData.menuName" />
      </el-form-item>
      <el-form-item v-if="form.busMainData.menuType === '3'" label="权限标识" prop="busMainData.privCode">
        <el-input v-model="form.busMainData.privCode" placeholder="权限标识" style="width: 460px;"/>
      </el-form-item>
      <el-form-item label="菜单排序" prop="busMainData.sort">
        <el-input-number v-model.number="form.busMainData.sort" :min="0" :max="999" controls-position="right" style="width: 460px;"/>
      </el-form-item>
      <el-form-item label="用于系统管理员" prop="busMainData.isAdmin">
        <el-radio-group v-model="form.busMainData.isAdmin">
          <el-radio v-for="item in dicts.yesorno" :label="item.dictCode" :key="item.dictCode" >{{ item.dictName }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.busMainData.menuType !== '3'" label="是否可见" prop="busMainData.isVisable">
        <el-radio-group v-model="form.busMainData.isVisable">
          <el-radio v-for="item in dicts.yesorno" :label="item.dictCode" :key="item.dictCode" >{{ item.dictName }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.busMainData.menuType !== '3'" label="菜单路径" prop="busMainData.pathUrl">
        <el-input v-model="form.busMainData.pathUrl" placeholder="菜单路径" style="width: 460px;"/>
      </el-form-item>
      <el-form-item v-if="form.busMainData.menuType === '2'" label="组件路径" prop="busMainData.componentUrl">
        <el-input v-model="form.busMainData.componentUrl" placeholder="组件路径" style="width: 460px;"/>
      </el-form-item>
      <el-form-item label="上级菜单" prop="busMainData.parentId">
        <treeselect v-model="form.busMainData.parentId" :options="menus" style="width: 460px;" placeholder="选择上级菜单" />
      </el-form-item>
      <el-form-item v-if="form.busMainData.menuType === '2'" label="业务模块代码" prop="busMainData.moduleBusClass">
        <el-input v-model="form.busMainData.moduleBusClass" placeholder="业务模块代码" style="width: 460px;"/>
      </el-form-item>
      <el-form-item v-if="form.busMainData.menuType === '2'" label="是否用于工作流" prop="busMainData.isWorkflow">
        <el-radio-group v-model="form.busMainData.isWorkflow">
          <el-radio v-for="item in dicts.yesorno" :label="item.dictCode" :key="item.dictCode" >{{ item.dictName }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button v-permission="['SYS_ADMIN']" :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addOrEdit, viewMainData, toAdd, toCopy, getAllMenusTree, getMenuLanByMenuId } from '@/api/system/menu'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import IconSelect from '@/components/IconSelect'
import multiMenuLan from './multiMenuLan'

export default {
  components: { Treeselect, IconSelect, multiMenuLan },
  props: {
    sup_this: {
      type: Object,
      required: true
    }
  },
  dictTypes: ['menu_type', 'yesorno'],
  data() {
    return {
      loading: false,
      dialog: false,
      isAdd: false,
      menus: [],
      form: {
        menuLanVOList: [],
        busMainData: {
          id: null,
          menuName: '',
          pathUrl: '',
          componentUrl: '',
          moduleBusClass: '',
          menuType: '2', // 默认内部
          enableFlag: 'Y',
          isAdmin: '0',
          isVisable: '1',
          isWorkflow: '0',
          icon: '',
          sort: 99,
          privCode: '',
          parentId: ''
        }
      },
      rules: {
        'busMainData.menuName': [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
        ],
        'busMainData.privCode': [
          { required: true, message: '请输入权限代码', trigger: 'blur' },
          { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
        ],
        'busMainData.sort': [
          { required: true, message: '请输入排序号', trigger: 'blur', type: 'number' }
        ]
      }
    }
  },
  methods: {
    cancel() {
      this.resetForm()
    },
    initDataOfBefore() {
      getAllMenusTree().then(res => {
        this.menus = res.data
      })
    },
    iconSelected(name) {
      this.form.busMainData.icon = name
    },
    addData() {
      this.isAdd = true
      const data = { paramBean: { }}
      toAdd(data).then(res => {
        this.dialog = true
        this.form = res.data
      }).catch(err => {
        this.dialog = false
        console.log(err)
      })
    },
    copyData(mainId) {
      this.isAdd = true
      const data = { paramBean: { id: mainId }}
      toCopy(data).then(res => {
        this.dialog = true
        this.form = res.data
      }).catch(err => {
        this.dialog = false
        console.log(err)
      })
    },
    viewMainData(id) {
      const data = { paramBean: { id: id }}
      viewMainData(data).then(res => {
        this.form = res.data
        // 将 '' 置为 空值
        if (!this.form.busMainData.parentId) {
          this.form.busMainData.parentId = null
        }
      }).then(() => {
        getMenuLanByMenuId(id).then(res => {
          this.form.menuLanVOList = res.data
        })
      })
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.isAdd) {
            this.doAdd()
          } else {
            this.doEdit()
          }
        }
      })
    },
    doAdd() {
      addOrEdit(this.form).then(res => {
        this.resetForm()
        this.loading = false
        this.sup_this.init()
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    doEdit() {
      addOrEdit(this.form).then(res => {
        this.resetForm()
        this.loading = false
        this.sup_this.init()
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
    },
    addMultiLan() {
      // 增加多语言
      const _this = this.$refs.multiMenuLan
      _this.dialog = true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
